<h4 class="display-6 text-center my-2 szin">Keresés az adatbázisban</h4>

<div class="row p-4">
    <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3">
        
        <form [formGroup]="myform" (ngSubmit)="keres(myform.value.szoveg, myform.value.mibenkeres)">

            <div class="input-group my-2">
                <input formControlName="szoveg" type="text" class="form-control form-control-sm" placeholder="Keresendő kifejezés...">
                <button class="btn btn-sm btn-warning">Keresés</button>
            </div>

            <div class="form-check form-check-inline">
                <input formControlName="mibenkeres" class="form-check-input" type="radio" name="mibenkeres" id="tipus" value="tipus">
                <label class="form-check-label" for="tipus">Tipus</label>
            </div>

            <div class="form-check form-check-inline">
                <input formControlName="mibenkeres" class="form-check-input" type="radio" name="mibenkeres" id="maxVolt" value="maxVolt">
                <label class="form-check-label" for="maxVolt">Feszültség</label>
            </div>

            <div class="form-check form-check-inline">
                <input formControlName="mibenkeres" class="form-check-input" type="radio" name="mibenkeres" id="maxAmper" value="maxAmper">
                <label class="form-check-label" for="maxAmper">Áramerősség</label>
            </div>

        </form>

    </div>
</div>



<div class="row">
    <div class="col-md-4 offset-md-4">

        <table class="table table-sm szin">

            <thead>
                <tr>
                    <th>Név</th>
                    <th>Tipus</th>
                    <th>maxVolt</th>
                    <th>maxAmper</th>
                    <th>hFE</th>
                </tr>
            </thead>

            <tbody>
                <ng-container *ngFor="let tartalomSor of talalatTomb">
                    <tr>
                        <td>{{tartalomSor.nev}}</td>
                        <td>{{tartalomSor.tipus}}</td>
                        <td>{{tartalomSor.maxVolt}}</td>
                        <td>{{tartalomSor.maxAmper}}</td>
                        <td>{{tartalomSor.hFE}}</td>
                    </tr>
                </ng-container>
            </tbody>     

        </table>

    </div>
</div>